<template>
  <div class="orders-page">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>订单管理</span>
        </div>
      </template>
      
      <el-table :data="orderList" v-loading="loading">
        <el-table-column prop="orderNo" label="订单号" width="180" />
        <el-table-column prop="userName" label="用户" width="120" />
        <el-table-column prop="storeName" label="店铺" width="150" />
        <el-table-column prop="amount" label="金额" width="100">
          <template #default="scope">
            ¥{{ scope.row.amount }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="下单时间" />
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <el-button type="primary" size="small" @click="viewOrder(scope.row)">
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const loading = ref(false)
const orderList = ref([
  {
    orderNo: 'ORD202312150001',
    userName: '张三',
    storeName: '麦当劳(王府井店)',
    amount: 58.50,
    status: 'completed',
    createTime: '2023-12-15 14:30:25'
  }
])

const getStatusType = (status) => {
  const statusMap = {
    'completed': 'success',
    'delivering': 'warning',
    'preparing': 'info',
    'paid': 'primary',
    'cancelled': 'danger'
  }
  return statusMap[status] || 'info'
}

const getStatusText = (status) => {
  const statusMap = {
    'completed': '已完成',
    'delivering': '配送中',
    'preparing': '制作中',
    'paid': '已支付',
    'cancelled': '已取消'
  }
  return statusMap[status] || '未知'
}

const viewOrder = (order) => {
  console.log('查看订单详情:', order)
}

onMounted(() => {
  // 加载订单数据
})
</script>

<style scoped>
.orders-page {
  padding: 0;
}
</style> 